// 我们项目js入口文件

// es6 导入其他模块的语法
import $ from 'jquery'
// 由于es6的代码 太高级了 浏览器解析不了 所有 这一行会有问题

// 使用 import导入css
import './css/index.css'
import './css/index.less'


// 注意 webpack 默认只可以打包js类型文件 无法处理其他类型非js类型的文件 如果要处理非js类型的文件 我们要安装一些 合适的 第三方 loader加载器
// 1.如果想要打包处理 css文件 需要安装 cnpn i style-loader css-loader -D
// 2.打开 webpack.config.js 这个配置文件 在里面新增1个 配置节点 叫做module 他是一个对象 在这个module 对象身上 有个 rules 属性 这是一个数组 这个数组中 存放了所有第三方文件的匹配和处理规则 


$(function () {
    $('li:odd').css('backgroundColor','red')
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'
    })
})

// webpack可以处理js互相依赖关系
// 浏览器不识别或者有兼容性的语法 转为 浏览器可以识别的代码

// webpack 要打包的路径 ./xxx/xxx.js  打包好存放路径 ./xxx/xxx.js

// 使用 webpack-dev-server 这个工具实现自动打包编辑的功能
// 1.运行cnpm i webpack-dev-server -D  
// 2.安装完毕后 这个工具的用法 和webpack命令的用法 完全一样
// 3.由于 我们是在项目中本地安装的 webpack-dev-server 所以无法在cmd里面使用 不能当做一个脚本命令 直接运行 只有哪些全局安装(-g)的工具才可以在终端中正常执行
// 4.webpack-dev-server 如果想要正常 运行 要求在本地项目中 必须安装 webpack 还有webpack-cil 这是最新版必须使用的
// 5.webpack-dev-server 帮我们打包生成的 bundle.js 文件 并没有存在硬盘上 而且托管到了电脑的内存中 所以 我们在项目根目录中 根本找不到这个打包好的bundle.js
// 6.可以认为 webpack-dev-server 吧打包好的文件 以一种虚拟的方式 托管到了我们项目的根目录中 虽然我们看不到他 但是可以认为 和dist src node_modules 平级 有一个看不到的文件 叫做bundle.js